<template>  
 <div class="login" v-if="dis">
    <div class="first" v-if="first">
        <div class="lo-header">
            <h4>登录</h4>
            <h4 @click.stop.prevent='shide'>X</h4>
        </div>
        <div class="lo-body">
            <div class="n-log2">
                <div class="u-main">
                    <div class="u-plt"></div>                               
                    <button type="button" class="btn btn-primary" v-on:click.stop.prevent="phone">手机号登录</button>
                  <span class="butres btn btn-default" @click.stop.prevent="vanish">注册</span>
                </div>
                <div class="u-alt">
                    <ul>
                        <li><a href=""><i class="mlg2-wx"></i>微信登录</a></li>
                        <li><a href=""><i class="mlg2-qq"></i>QQ登录</a></li>
                        <li><a href=""><i class="mlg2-sn"></i>微博登录</a></li>
                        <li><a href=""><i class="mlg2-wy"></i>网易游戏账号登录</a></li>
                    </ul>                           
                </div>                       
            </div>
        </div> 
    </div>
   <div class="second" v-if="second">
    <div class="lo-header">
            <h4>手机号登录</h4>
            <h4 @click.stop.prevent='shide'>X</h4>
        </div>
        <div class="lo-body">
            <div class="n-log1">
                <form>
                <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入手机号" v-model="username">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" v-model="password">
                </div>
                <input type="checkbox" checked>自动登录
                <span>忘记密码？</span>
                
                </form>
                <button type="button" class="btn btn-primary" @click = 'getlog'>登录</button>
            </div>
        </div> 
        <div class="lo-footer">
            <span class="phonr" @click.stop.prevent="rest"><其他登录方式</span>
            <span class="registe" @click.stop.prevent="vanish">没有账号？立即注册</span>
        </div>
   </div>
  <div class="third" v-if="third">
    <div class="lo-header">
            <h4>手机号注册</h4>
            <h4 @click.stop.prevent='shide'>X</h4>
        </div>
        <div class="lo-body">
            <div class="n-log1">
               <form>
                    <div class="formgroup">
                        <label >手机号：</label>
                        <span class="u-prefix">+86</span>
                        <input type="email" class="u-prespan"  placeholder="请输入手机号" v-model="number" @blur='examine'>
                    </div>
                    <div class="form-group">
                        <label>密码：</label>
                        <input type="password" class="form-control" placeholder="设置登录密码，不得少于6位" v-model="userpassword">
                        <table border="0" cellpadding='0' cellspacing='0'>
                            <tr align='center'>
                                <td class="pwd pwd_c"></td>
                                <td class="pwd pwd_c">密码强度：{{this.infoText}}</td>
                                <td class="pwd pwd_c"></td>
                            </tr>
                        </table>
                        <span v-if="span1">{{span2}}</span>
                    </div>
                    <button type="button" class="btn btn-primary butres" v-on:click='register'>下一步</button>
            </form>
                
            </div>
        </div> 
        <div class="lo-footer">
            <span class="phonr" @click.stop.prevent="phone"><返回登录</span>
        </div>
   </div>
    <!--填写信息表-->
       <div class="first" v-if="xi"> 
        <div class="lo-header">
            <h4>填写信息</h4>
            <h4 @click.stop.prevent='shide'>X</h4>
        </div>
        <div class="lo-body s-cont">
           <form class="form-horizontal">
                <div class="form-group">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="昵称" v-model="myname" >
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="个人简介" v-model="introduce" >
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="向往地区" v-model="area" >
                </div>
                 <div class="form-group">
                    <input type="text" class="form-control" id="inputPassword3" placeholder="头像地址" v-model="headimg" >
                </div>
                <label class="checkbox-inline">
                     <input type="checkbox" id="inlineCheckbox1" value="男"  >男
                </label>
                <label class="checkbox-inline">
                     <input type="checkbox" id="inlineCheckbox2" value="女" > 女 
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox3" value="保密"> 保密
                </label>
                    <button type="button" class="btn btn-primary btn-sm s-su-p" @click = 'submitMessage'>提交</button>
            </form>

        </div> 
    </div>
 </div>
 
</template>
<script>

     export default{
        name:"enter",
        porps:['first1'],
        data(){
            return{
               msg:"登录框",
               dis:true,/*设置 模态块为显示*/
               first:true,/*设置第一个页面为显示 */
               second:false,/*设置第二个页面为不显示 */
                third:false,/*设置注册界面不显示 */
                userpassword:'',
                infoText:'低',
                password:'',
                username:'',
                number:'',
                span1:false,
                span2:'',
                xi:false,
                myname:'',/*昵称*/
                introduce:'',/*个人简介*/
                gender : '', /*性别*/
                area:'', /*地区*/
                headimg:''/*头像地址*/
            }
        },
        created:function(){

        },
        components:{

        },
        computed: {},
        methods:{
            getlog:function(){/*登陆*/
                let password = this.password
                let username = this.username
                this.$http.post('http://localhost:3000/api/getlog',{'username':username,'password':password}).then(res=>{
                    console.log(res)
                    let data = res.data
                    if (data != false) {
                        //获取歌单列表
                        this.$http.get('http://localhost:3000/api/getsongs').then(res=>{
                            console.log(res.data[0])
                            let songdata = res.data[0]
                            this.$store.commit('loginWin',songdata);
                            let dis = this.third
                            this.$store.commit('Ostate',dis);
                            console.log(dis)
                            this.dis = false;
                        })                      
                    }else{
                        alert('该账号为空')
                    }
                })
            },
            /*提交信息*/
            submitMessage:function(){
                console.log(this.gender)
                console.log(this.myname + this.troduce + this.area + this.headimg )
                if (this.myname || this.troduce || this.area || this.headimg  || this.introduce != '') {
                    let myname = this.myname;
                    let troduce = this.troduce;
                    let area = this.area;
                    let headimg = this.headimg;
                    let introduce = this.introduce;
                this.$http.post('http://localhost:3000/api/adddata',{'myname':myname,'troduce':troduce,'area':area,'headimg':headimg,'introduce':introduce}).then()
                     this.xi = false;
                     this.second = true;
                }
            },
          
            shide:function(){/*点X的是消失掉 */
            this.dis=!this.dis;
        },
            phone:function(){/*选择手机登录的时候进入新页面 */
            this.first=false;
            this.second=true;
            this.third=false;
        },
             rest:function(){/*点击其他方式的时候返回到选择登录界面 */
             this.first=true;
             this.second=false;
             
        },
        vanish:function(){/*点击注册的时候 */
              this.third=true;
              this.first=false;
              this.second=false;
        },
        userpasswordGrade:function(){ //密码测试
            let grade = /^(?!([\d_])+$)(?!([a-zA-Z_]+)$)\w+$/
            let s = this.userpassword
            if(grade.test(s)){
                this.infoText = "强";
            }else{
                this.infoText = '中';
            }
        },
          examine:function(){ //鼠标离开时自动检测手机号的正确性
                let reg = /^\s*$/g;//不能为空
                let regFormat=/^[1][358][0-9]{9}$/;//正确手机号
                let number=this.number;
                console.log(number);
                if (reg.test(number)) {
                    this.span2 = '手机号不能为空';
                    this.span1 = true;
                }else if(!(regFormat.test(number))){
                    this.span2 = '请输入正确手机号';
                    this.span1 = true;
                }else{
                     this.span2 = false;
                    this.span1 = '';
                }
            },
            register:function(){
                // alert(55)
                let regFormat=/^[1][358][0-9]{9}$/;//正确手机号
                let grade = /^(?!([\d_])+$)(?!([a-zA-Z_]+)$)\w+$/ //密码强度
                let s = this.userpassword;
                let number=this.number;
                console.log(number,s)
                if (regFormat.test(number) &&grade.test(s) ) {
                    this.$http.post('http://localhost:3000/api/addmusic',{'username':number,'password':s}).then(res=>{
                        // this.second = true;
                        console.log(res)
                        alert('注册成功')
                        this.third = false;
                        this.xi = true;
                     })

                }
            
                
                
                
                
            }
    }  ,
    watch: {
        userpassword:'userpasswordGrade'
    }
   
        }
 
</script>
<style scoped>
table{
    margin-top: 5px;
}
 /*模态块*/
 .login{
     border: 1px solid rgb(135,135,135);
     float: left;
     width:530px;
     height:320px;
     border-radius: 5px;
    /*border: 1px solid #000;*/
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -220px;
    margin-left: -350px;
   background: #fff;
    z-index: 20;
     
 }
 .first,.second,.third{
        float: left;
 }
 
 .lo-header{
    float: left;
    background:url("../../../static/img/topbar.png") 1px -85px;
    color:white;
    border-radius: 5px 5px 0 0 ;
    width:529px;
 }
.lo-header h4{
    float: left;
    font-size: 14px;
    cursor: pointer;
    margin:10px 20px;
 }
.lo-header h4:nth-child(2){
    float: right;
    color:#fff;
    font-size: 14px;
}
.lo-body{
    margin:10px 0;
}
.n-log2{/*外层div包裹*/
    padding: 40px 0 39px;
    height: 250px;
    width: 600px;
}
.u-main{/*模态框左侧*/
    float: left;
    width: 279px;
    height: 210px;
    padding: 0 35px 3px 40px;
    border-right: 1px dotted #ccc;
    
}
.u-plt{/*图片*/
    height: 120px;
    background: url("../../../static/image/platform.png");
}
.u-main button{
    width: 224px;
}
.butres{
     width: 224px;
}
.u-alt{
    float: left;
    padding: 0 35px 3px 40px;
    width: 300px;
}
.u-alt ul li{
       margin-top: 15px;
       display: list-item;
}
.u-alt ul li a{
    font-size: 14px;
    color: #333;
    line-height: 38px;
}
.u-alt ul li i{
    margin-right: 14px;
    width: 38px;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
}
.mlg2-wx{/*微信图标*/
    background: url("../../../static/image/logo.png") -150px -670px;
}
.mlg2-qq{
     background: url("../../../static/image/logo.png") -190px -670px;
}
.mlg2-sn{
     background: url("../../../static/image/logo.png") -231px -670px;
}
.mlg2-wy{
     background: url("../../../static/image/logo.png") -271px -670px;
}
.log-2{
    display:none;
}

.second .n-log1,
.third .n-log1{
    width:220px;
    margin: 0 auto; 
}

.second .n-log1 span{
    float: right;
}
.second .n-log1 from,
.second .n-log1 button{
    float: left;
}
.second .n-log1 button{
    margin:20px auto;
    width:200px;
}
.second .lo-body{
    margin:75px auto;
}
.third .lo-body{
    margin:49px auto;
}
.lo-footer{
    float: left;
    padding: 0 19px;
    height: 48px;
    border-top: 1px solid #c6c6c6;
    border-radius: 0 0 4px 4px;
    line-height: 48px;
    background-color: #f7f7f7;
    width:528px;
}
.phonr{/*其他登录方式 */
cursor: pointer;
}
.registe{/*注册 */
    float: right;
    cursor: pointer;
}
.formgroup{
    position: relative;
    padding-right: 14px;
}
.u-prefix{
    position: absolute;
    top: 366px;
    left: 7px;
    padding: 0;
    margin: 0;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #333;
    z-index: 2;
}
.u-prespan{
    width: 220px;
    height: 34px;
    padding: 5px 6px 5px 30px;
    line-height: 20px;
    border-radius: 5px ;
    text-shadow: none;
}
.s-cont{
    padding: 50px 120px;
}
.s-su-p{
    margin:4px 0px 0 106px ;
}
</style>